<template>
    <div class="p-2">
        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave">
            <searchrevealing>
                <el-tabs v-model="activeTab">
                    <el-tab-pane label="供应商管理" name="supplier">
                        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="98px">
                            <el-form-item label="供应商名称" prop="supplierName">
                                <el-input v-model="queryParams.supplierName" placeholder="请输入供应商名称" clearable
                                    style="width: 220px" @keyup.enter="handleQuery" />
                            </el-form-item>
                            <el-form-item label="供应商编码" prop="supplierCode">
                                <el-input v-model="queryParams.supplierCode" placeholder="请输入供应商编码" clearable
                                    style="width: 220px" @keyup.enter="handleQuery" />
                            </el-form-item>
                            <el-form-item label="招商部" prop="recruiterDept">
                                <el-select v-model="queryParams.recruiterDept" placeholder="请选择招商部" clearable
                                    style="width: 220px" @change="deptChange">
                                    <el-option v-for="dict in deptList" :key="dict.deptId" :label="dict.deptName"
                                        :value="dict.deptId" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="招商员" prop="recruiter">
                                <el-select v-model="queryParams.recruiter" placeholder="请选择招商员" clearable
                                    style="width: 220px">
                                    <el-option v-for="dict in recruiterList" :key="dict.userId" :label="dict.nickName"
                                        :value="dict.userId" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="是否已签合同" prop="contractStatus">
                                <el-select v-model="queryParams.contractStatus" placeholder="请选择合同状态" clearable
                                    style="width: 220px">
                                    <el-option v-for="dict in contractStatusList" :key="dict.value" :label="dict.label"
                                        :value="dict.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="handleQuery">查询</el-button>
                                <el-button @click="resetQuery">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>

            </searchrevealing>
        </transition>
        <el-card shadow="never">
            <template #header>
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="primary" @click="handleAddSupplier">添加供应商</el-button>
                    </el-col>
                    <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
                </el-row>
            </template>
            <el-table v-loading="loading" :data="supplierAddProductsList">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="供应商名" align="center" prop="supplierName" />
                <el-table-column label="供应商编码" align="center" prop="supplierCode" />
                <el-table-column label="供应商类型" align="center" prop="supplierType" />
                <el-table-column label="供应商评级" align="center" prop="supplierGrade" />
                <el-table-column label="招商部" align="center" prop="recruiterDept" />
                <el-table-column label="招商员" align="center" prop="recruiter" />
                <el-table-column label="是否已签合同" align="center" prop="contractStatus" />
                <el-table-column label="供货合同" align="center" prop="supply" />
                <el-table-column label="签订日期" align="center" prop="supplData" />
                <el-table-column label="签订人" align="center" prop="supplyPeople" />
                <el-table-column label="破价合同" align="center" prop="breaking" />
                <el-table-column label="签订日期" align="center" prop="breakingData" />
                <el-table-column label="对接人" align="center" prop="breakingPeople" />
                <el-table-column label="已提报商品数" align="center" prop="forwardNums" />
                <el-table-column label="寄样商品数" align="center" prop="samplesNums" />
                <el-table-column label="主播已选商品数" align="center" prop="selectNums" />
                <el-table-column label="已售卖商品数" align="center" prop="sellNums" />
                <el-table-column label="合作主播数" align="center" prop="anchorNums" />
                <el-table-column label="账号创建时间" align="center" prop="creatTime" />
                <el-table-column label="创建人" align="center" prop="creatName" />
                <el-table-column label="最近登录时间" align="center" prop="times" />
                <el-table-column label="账号状态" align="center" prop="status" />
                <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-button link type="primary" @click="" class="color_theme">
                            冻结账号</el-button>
                        <el-button link type="primary" @click="" class="color_theme"
                            style="margin-left: 0px !important">
                            修改评级</el-button>
                        <el-button link type="primary" @click="" class="color_theme"
                            style="margin-left: 0px !important">重置密码</el-button>
                        <el-button link type="primary" @click="" class="color_theme"
                            style="margin-left: 0px !important">登录前台</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getList" />
        </el-card>

        <!-- 添加供应商 -->
        <supplierAdd @doClose="supplierClose" :supplierVisible="supplierVisible">
        </supplierAdd>
    </div>
</template>
<script setup name="Supplier" lang="ts">
import { SupplierTable } from '@/api/group/supplier/types'
import { SupplierQueryParams } from '@/api/group/supplier/types'
import { hmSupplierList } from '@/api/group/supplier/index'
import { getDeptList, getUserById } from '@/api/group/qualityControl'
import supplierAdd from './components/supplierAdd.vue'
const supplierAddProductsList = ref<SupplierTable[]>([]);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const deptList = ref<{ deptId: string; deptName: string; }[]>([])
const recruiterList = ref<{ userId: string; nickName: string; }[]>([])
const activeTab = ref('supplier');
const showSearch = ref(true);
const queryFormRef = ref<ElFormInstance>();
const loading = ref(true);
const total = ref(0);
const supplierVisible = ref(false)


const contractStatusList = reactive([
    {
        label: '测试合同状态1', value: '1'
    },
    {
        label: '测试合同状态2', value: '2'
    }
])

const queryParams = ref<SupplierQueryParams>({
    pageNum: 1,
    pageSize: 10,
    supplierName: undefined,
    supplierCode: undefined,
    recruiterDept: undefined,
    recruiter: undefined,
    contractStatus: undefined
})

/** 查询供应商添加商品列表 */
const getList = async () => {
    try {
        loading.value = true;
        const res = await hmSupplierList(queryParams.value);
        supplierAddProductsList.value = res.rows;
        total.value = res.total;
        loading.value = false;
    } catch (e) {
    } finally {
        loading.value = false;
    }
};

/** 获取招商部门信息*/
const getDeptLists = async () => {
    const res = await getDeptList({ parentId: '1782395704411734018' })
    deptList.value = res.data
}

/** 根据招商部获取招商员*/
const deptChange = async (event: string) => {
    if (event) {
        const res = await getUserById(event)
        recruiterList.value = res.data
        queryParams.value.recruiter = undefined
    } else {
        recruiterList.value = []
        queryParams.value.recruiter = undefined
    }
}
/** 添加供应商 */
const handleAddSupplier = () => {
    supplierVisible.value = true;
};
// 供应商关闭
const supplierClose = () => {
    supplierVisible.value = false;
    getList();
};
/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};

onMounted(() => {
    queryParams.value.pageNum = 1;
    getDeptLists();
    getList();
});

</script>
<style lang="scss" scoped>
.mb96 {
    margin-bottom: 96px;
}
</style>